<template>
	<mallCate @handlerSelect="select" :data="topData">
		<view class="itemWrap">
			<view class="item" v-for="(item,i) in rightData" :key="i" @click="toGoodsList(item.id)">
				<view style="width:100rpx;margin:0 auto;border-radius:50%;overflow:hidden">
					<image :src="item.img" mode="" style="width:100rpx;height:100rpx;border-radius: 16rpx;"></image>
				</view>
				<view style="text-align: center;">
					{{item.name}}
				</view>
			</view>
			
		</view>
	</mallCate>
</template>

<script setup>
	import {ref} from 'vue'
	import mallCate from '../components/mallCate.vue'
	import http from '../components/http.js'
	const topData = ref([]) 
	const rightData = ref([])
	http.http({url:'/category/getByPid?pid=0',method:'GET'}).then(res=>{
		topData.value = res.data.data
		http.http({url:`/category/getByPid?pid=${topData.value[0].id}`,method:'GET'}).then(res=>{
				rightData.value = res.data.data
			})
	})
	function select(i){
		http.http({url:`/category/getByPid?pid=${i}`,method:'GET'}).then(res=>{
				rightData.value = res.data.data
			})
		console.log(i)
	}
	function toGoodsList(id){
		console.log(id)
		uni.navigateTo({
			url:'goodsList?id='+id
		})
	}
</script>

<style>
	.itemWrap{
		display:flex;
		margin-top:30rpx;
	}
	.item{
		width:150rpx;
	}
</style>